@layer utilities {
  .ProseMirror .tableWrapper {
    @apply my-12;
    overflow-x: auto;
    overflow-y: visible !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .ProseMirror table {
    @apply border-collapse rounded box-border w-full border border-black/10 relative mr-8 mb-6;
  }

  /* 右侧添加列按钮 - 挂在 wrapper */
  .ProseMirror .tableWrapper::after {
    content: '+ 添加列';
    @apply absolute top-0 -right-4 h-full w-4 flex items-center justify-center cursor-pointer
        text-[10px] text-white opacity-0 border-t border-r border-b border-gray-300;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    z-index: 10;
    pointer-events: auto;
    transition: opacity 200ms ease-in-out;
    transition-delay: 300ms; /* 隐藏延迟 */
  }

  .ProseMirror .tableWrapper:hover::after {
    @apply opacity-100 text-black;
    transition-delay: 0ms; /* 显示无延迟 */
  }

  /* 底部添加行按钮 - 挂在 wrapper */
  .ProseMirror .tableWrapper::before {
    content: '+ 添加行';
    @apply absolute -bottom-6 left-0 h-6 w-full flex items-center justify-center !cursor-pointer
    text-[10px] text-white opacity-0 text-center border-l border-r border-b border-gray-300;
    z-index: 100;
    pointer-events: auto;
    transition: opacity 200ms ease-in-out;
    transition-delay: 300ms; /* 隐藏延迟 */
  }

  .ProseMirror .tableWrapper:hover::before {
    @apply opacity-100 text-black;
    transition-delay: 0ms; /* 显示无延迟 */
  }

  .ProseMirror table:hover::after {
    @apply opacity-100 text-black;
  }

  .dark .ProseMirror table {
    @apply border-white/20;
  }

  .ProseMirror table td,
  .ProseMirror table th {
    @apply border border-black/10 min-w-[100px] p-2 relative text-left align-top;
  }

  .dark .ProseMirror table td,
  .dark .ProseMirror table th {
    @apply border-white/20;
  }

  /* 单元格右侧按钮：默认隐藏，hover 显示，位于边框上 */
  .ProseMirror table td a.right {
    @apply absolute top-1/2 z-[2] w-4 h-6 grid place-items-center transition-opacity duration-200;
    right: -8px; /* 位于右边框上 */
    transform: translateY(-50%);
    opacity: 0; /* 默认隐藏 */
    color: rgb(0 0 0 / 0.6);
    background: rgb(255 255 255 / 0.9);
    pointer-events: auto;
    user-select: none;
    z-index: 1000;
    cursor: pointer;
  }

  .dark .ProseMirror table td a.right {
    color: rgb(255 255 255 / 0.6);
    background: rgb(0 0 0 / 0.9);
  }

  .ProseMirror table td.has-focus a.right {
    opacity: 1; /* 只有 has-focus 时显示 */
  }

  /* 使用伪元素绘制三个竖直排列的点 */
  .ProseMirror table td a.right::before {
    content: '';
    width: 2px;
    height: 2px;
    border-radius: 9999px;
    background: currentColor;
    box-shadow:
      0 -4px 0 currentColor,
      0 4px 0 currentColor; /* 上下两个点 */
  }

  .dark .ProseMirror table td a.right::before {
    background: currentColor;
    box-shadow:
      0 -4px 0 currentColor,
      0 4px 0 currentColor;
  }

  .ProseMirror table th {
    @apply font-bold;
  }

  .ProseMirror table td:first-of-type:not(a) {
    @apply mt-0;
  }

  .ProseMirror table td p {
    @apply m-0;
  }

  .ProseMirror table td p + p {
    @apply mt-3;
  }

  .ProseMirror table .column-resize-handle {
    @apply absolute -right-1 top-0 -bottom-[2px] w-2 flex pointer-events-none;
  }

  .ProseMirror table .column-resize-handle::before {
    content: '';
    @apply h-full w-[1px] ml-2 bg-black/20;
  }

  .dark .ProseMirror table .column-resize-handle::before {
    @apply bg-white/20;
  }

  .ProseMirror table .selectedCell {
    @apply bg-black/5 border-black/20 border-double;
  }

  .dark .ProseMirror table .selectedCell {
    @apply bg-white/10 border-white/20;
  }

  .ProseMirror table .grip-column,
  .ProseMirror table .grip-row {
    @apply absolute z-[1] flex justify-center items-center cursor-pointer bg-black/5;
  }

  .dark .ProseMirror table .grip-column,
  .dark .ProseMirror table .grip-row {
    @apply bg-white/10;
  }

  .ProseMirror table .grip-column {
    @apply w-[calc(100%+1px)] h-3 -top-3 left-0 -ml-[1px] border-l border-black/20;
  }

  .dark .ProseMirror table .grip-column {
    @apply border-white/20;
  }

  .ProseMirror table .grip-column:hover {
    @apply bg-black/10;
  }

  .dark .ProseMirror table .grip-column:hover {
    @apply bg-white/20;
  }

  .ProseMirror table .grip-column:hover::before {
    content: '';
    @apply w-2.5 border-b-2 border-dotted border-black/60;
  }

  .dark .ProseMirror table .grip-column:hover::before {
    @apply border-white/60;
  }

  .ProseMirror table .grip-column.selected {
    @apply bg-black/30 border-black/30 shadow-sm;
  }

  .dark .ProseMirror table .grip-column.selected {
    @apply bg-white/30 border-white/30;
  }

  .ProseMirror table .grip-column.selected::before {
    content: '';
    @apply border-b-2 border-dotted;
  }

  .ProseMirror table .grip-column.first {
    @apply border-transparent rounded-tl-sm;
  }

  .ProseMirror table .grip-column.last {
    @apply rounded-tr-sm;
  }

  .ProseMirror table .grip-row {
    @apply h-[calc(100%+1px)] w-3 top-0 -left-3 -mt-[1px] border-t border-black/20;
  }

  .dark .ProseMirror table .grip-row {
    @apply border-white/20;
  }

  .ProseMirror table .grip-row:hover {
    @apply bg-black/10;
  }

  .dark .ProseMirror table .grip-row:hover {
    @apply bg-white/20;
  }

  .ProseMirror table .grip-row:hover::before {
    content: '';
    @apply h-2.5 border-l-2 border-dotted border-black/60;
  }

  .dark .ProseMirror table .grip-row:hover::before {
    @apply border-white/60;
  }

  .ProseMirror table .grip-row.selected {
    @apply bg-black/30 border-black/30 shadow-sm;
  }

  .dark .ProseMirror table .grip-row.selected {
    @apply bg-white/30 border-white/30;
  }

  .ProseMirror table .grip-row.selected::before {
    content: '';
    @apply border-l-2 border-dotted;
  }

  .ProseMirror table .grip-row.first {
    @apply border-transparent rounded-tl-sm;
  }

  .ProseMirror table .grip-row.last {
    @apply rounded-bl-sm;
  }
}
